<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息中心</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/mui.imageviewer.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="chat.css" />

	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息中心</h1>
			<a id="feedback" class="mui-icon mui-icon-help mui-pull-right"></a>
		</header>
		<pre id='h'></pre>
		<script id='msg-template' type="text/template">
			<% for(var i in record){ var item=record[i]; %>
			<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
				<% if(item.sender=='self' ) { %>
				<i class="msg-user mui-icon mui-icon-person"></i>
				<% } else { %>
				<img class="msg-user-img" src="../../images/logo.png" alt="刻画影讯" />
				<% } %>
				<div class="msg-content">
					<div class="msg-content-inner">
						<% if(item.type=='text' ) { %>
						<%=( item.content|| '&nbsp;&nbsp;') %>
						<% } else if(item.type=='url' ) { %>
						<a href="#" class="open-url" onclick="mui.openWindow('<%=(item.content)%>','query')">
							<%=(item.content)%>
						</a>
						<% }else if(item.type=='news' ) { %>
						<a href="#" class="open-url" onclick="mui.openWindow('<%=(item.content.detailurl)%>','query')">
							<%=(item.content.article)%>
						</a>
						<% }else if(item.type=='recipe' ) { %>
						<a href="#" class="open-url" onclick="mui.openWindow('<%=(item.content.detailurl)%>','query')">
							<%=(item.content.name)%>
						</a>
						<% }else if(item.type=='image' ) { %>
						<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
						<% } else if(item.type=='sound' ) { %>
						<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
						<span class="play-state">点击播放</span>
						<% } %>
					</div>
					<div class="msg-content-arrow"></div>
				</div>
				<div class="mui-item-clear"></div>
			</div>
			<% } %>
		</script>
		<div class="mui-content">
			<div id='msg-list'>
			</div>
		</div>
		<footer>
			<div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
			</div>
			<label for="" class="footer-right">
				<i id='msg-type' class="mui-icon mui-icon-mic"></i>
			</label>
		</footer>
		<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div>

		<script src="../../js/mui.js"></script>
		<script src="../../js/mui.imageViewer.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="chat.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>